<template>
  <div>
    <div>
      <div ref="bar" style="width:4.72rem;height:2.3rem"></div>
    </div>
  </div>
</template>
<script>
  var echarts = require("echarts/lib/echarts");
  import fontSizeRem from "../utils/remtopx.js";
  export default {
    props: {
      formList: {}
    },
    data() {
      return {};
    },
    watch: {
      formList: {
        handler(val) {
          this.$nextTick(() => {
            this.setBar();
          });
        },
        deep: true
      }
    },
    methods: {
      setBar(index) {
        var myChart = this.$echarts.init(this.$refs.bar);
        let xData = this.formList.map(item => {
          return item.key;
        });
        let yData1 = this.formList.map(item => {
          return item.value
        });
        let that = this

        // 绘制图表
        myChart.setOption({
          grid: {
            left: "0.24rem",
            right: "5%",
            bottom: "0",
            top: "7.54%",
            // x2: "0.15rem",
            // y2: "0.3rem",
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter(params) {
              return (that.formList[params[0].dataIndex].timeStr + "<br />" + "点击量：" +
                params[0].value
              );
            }
          },
          color: ["#0ECECA"],
          xAxis: {
            type: "category",
            // boundaryGap: false,
            axisTick: {
              show: false
            },
            data: xData,
            axisLine: {
              lineStyle: {
                color: "#103D59"
              }
            },
            axisLabel: {
              // x轴字体颜色
              textStyle: {
                color: "#92A3CC",
                fontSize: fontSizeRem.fontSize(0.1)
              }
            },
            splitLine: {
              show: true, // 颜色类型的修改
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#103D59"]
              }
            }
          },
          yAxis: {
            type: "value",
            show: true,
            axisLine: {
              show: true // Y轴线
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true, // 颜色类型的修改
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#103D59"]
              }
            },
            axisLine: {
              lineStyle: {
                color: "#103D59"
              }
            },
            axisLabel: {
              // x轴字体颜色
              textStyle: {
                color: "#92A3CC",
                fontSize: fontSizeRem.fontSize(0.1)
              }
            }
          },
          series: [
            {
              type: "line",
              smooth: false,
              symbolSize: 0,
              stack: "总量",
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#5DDD5C"
                  },
                  {
                    offset: 1,
                    color: "#D8D8D8"
                  }
                ])
              },
              itemStyle: {
                normal: {
                  color: "#5DDD5C",
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              },
              data: yData1
            }
          ]
        });
      }
    }
  };
</script>
<style lang="less" scoped>
  .title {
    margin-bottom: 0.26rem;
  }
</style>